<template>
  <div class="content-item-box" :class="item.type">
    <h3 class="title" :class="item.type">{{ item.title }}</h3>
    <!--    内容的滚动区域-->
    <ul class="scroll-area-group" :style="{'margin-left': currPage * (-296) + 'px'}">
      <li class="scroll-area" v-for="list in item.list">
        <h3 class="sub-title">{{ list.title }}</h3>
        <p class="desc-title">{{ list.desc }}</p>
        <p class="price">{{ list.price }}</p>
        <a :href="list.sourceUrl">
          <img class="item-image" :src="list.imgUrl" alt="">
        </a>
      </li>
    </ul>
    <svg @click="previousOne" class="icon icon-chevron-left" aria-hidden="true">
      <use xlink:href="#icon-left"></use>
    </svg>
    <svg @click="nextOne" class="icon icon-chevron-right" aria-hidden="true">
      <use xlink:href="#icon-right"></use>
    </svg>
    <ul class="small-dots-group">
      <li class="small-dots" v-for="(item,index) in item.list"
          :class="{'active': currPage === index}"
          @click="clickToReach(index)">
        <span class="dot"></span>
      </li>
    </ul>
  </div>
</template>
<script>
import '@/assets/font/banner/banner'

export default {
  name: "ContentItemBox",
  data() {
    return {
      currPage: 0,
    }
  },
  props: {
    item: {
      type: Object,
      require: true,
    }
  },
  methods: {
    previousOne() {
      if (this.currPage !== 0) {
        this.currPage--
      }
    },
    nextOne() {
      if (this.currPage < Math.floor((this.item.list.length - 1))) {
        this.currPage++
      }
    },
    clickToReach(index) {
      this.currPage = index
    }
  },
}
</script>

<style scoped lang="less">
.content-item-box {
  position: relative;
  height: 376px;
  width: 296px;
  overflow: hidden;
  transition: all .3s linear;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 5px 5px 20px #ccc;
    
    .icon-chevron-left, .icon-chevron-right {
      opacity: 1;
    }
  }
  
  &.book {
    border-top: 1px solid #ffac13;
  }
  
  &.theme {
    border-top: 1px solid #83c44e;
  }
  
  &.game {
    border-top: 1px solid #e53935;
  }
  
  &.app {
    border-top: 1px solid #2196f3;
  }
  
  .title {
    font-size: 16px;
    margin: 0 10px 18px 10px;
    text-align: center;
    
    &.book {
      color: #ffac13;
    }
    
    &.theme {
      color: #83c44e;
    }
    
    &.game {
      color: #e53935;
    }
    
    &.app {
      color: #2196f3;
    }
  }
  
  .scroll-area-group {
    display: flex;
    transition: all .3s linear;
    
    .scroll-area {
      height: 336px;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .sub-title {
        width: 296px;
        font-size: 20px;
        margin-bottom: 10px;
        text-align: center;
        color: #333333;
      }
      
      .desc-title {
        font-size: 12px;
        margin: 0 48px;
        color: #b0b0b0;
        text-align: center;
      }
      
      .price {
        font-size: 12px;
        margin: 14px 0;
        text-align: center;
      }
      
      .item-image {
      
      }
    }
  }
  
  .icon-chevron-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    height: 40px;
    width: 20px;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    border-radius: 5px;
    transition: all .2s linear;
  }
  
  .icon-chevron-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    height: 40px;
    width: 20px;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    border-radius: 5px;
    transition: all .2s linear;
  }
  
  .small-dots-group {
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translate(-50%, 0);
    
    .small-dots {
      display: inline-block;
      width: 10px;
      height: 10px;
      padding: 10px;
      margin: 0 2px;
      cursor: pointer;
      transition: all .3s linear;
      
      &.active {
        .dot {
          background: #fff;
          border: 3px solid #ff6700;
        }
      }
      
      .dot {
        display: block;
        width: 12px;
        height: 12px;
        border: 4px solid #f5f5f5;
        border-radius: 12px;
        text-align: left;
        text-indent: -9999em;
        overflow: hidden;
        background-color: #b0b0b0;
        transition: all .5s;
      }
    }
  }
}
</style>
